<template>
  <div class="top_kline trading-chart">
    <div class="klinetop">
      <div class="ticker coin_title">
        <div class="coin_infobox flex_space">
          <div class="coinone flex">
            <h2 class="symbol-name">BTC/USDT</h2>
            <span class="symbol-type">主板</span>
            <div>
              <p class="color-red us_price">{{topData}}</p>
              <p class="cny_price">≈ 64646.72 CNY</p>
            </div>
            <div class="top_mag">
              <p class="tl_p">涨幅</p>
              <p class="color-red">-0.39%</p>
            </div>
            <div class="top_mag">
              <p class="tl_p">24H高</p>
              <p class="bt_p">9438.88</p>
            </div>
            <div class="top_mag">
              <p class="tl_p">24H低</p>
              <p class="bt_p">9249.10</p>
            </div>
            <div class="top_mag">
              <p class="tl_p">24H量</p>
              <p class="bt_p">24,119 BTC</p>
            </div>

          </div>
          <div class="set_cor">
            <i class="iconfont icon-iconset0108"></i>
          </div>
        </div>
          
      </div>
    </div>  
      <div class="container-k">
        <img src="../../assets/images/trade/klineimg.png" alt="" srcset="">
      </div>
    
  </div>
</template>
<script>
import mainCoinModel from "@/model/allCoinModel.js";
import {
  addCustomList,
  removeCustomList,
  matchCustomList
} from "@/assets/js/common.js";
export default {
  name: "coin-Tab",
  data() {
    return {
      mainCoinModel: mainCoinModel,
      currentId: 0,
      tableData: null,
      showLoading: true,
      activeName: "second",
      topData:{},
      tableData: [
        {
          coin: "BTC",
          price: "9378.12",
          rise: "+1.12"
        },
        {
          coin: "ETH",
          price: "192.52",
          rise: "-1.95"
        },
        {
          coin: "ETH",
          price: "0.3018",
          rise: "+5.97"
        }
      ]
    };
  },
  mounted() {},
  destroyed() {},
  methods: {
    formatter(row, column) {
      return row.rise;
    },
    //表格列点击
    getRowData(data) {
      console.log(123456789,data);
      this.topData=data;
      // if (mainCoinModel.tradecoinid == data.coinid) return false;
      mainCoinModel.tradecoinid = data.coinid;
      mainCoinModel.coinid = data.maincoinid;
      this.latestBuyData = [];
      this.latestSoldData = [];
      //当日委托
      this.currentDeclareData = [];
      //历史委托
      this.historicalDeclareData = [];
      //成交历史
      this.historicalBuyData = [];
      // this.loadData(data);
    },
    // 获取自选
    getCustomList() {
      let customList = this.storage.get("customList");
      this.currentId = "opt";
      customList && customList.length > 0 && (this.tableData = customList);
    },
    // 添加自选
    addMylist(rowData, index) {
      let data = rowData;
      this.$set(this.tableData, index, data);
      data.isMyLike = !data.isMyLike;
      if (data.isMyLike) {
        addCustomList(data);
      } else {
        if (this.currentId == "opt") {
          this.tableData = removeCustomList(data);
        } else {
          removeCustomList(data);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.trading-chart{ 
  .ticker {
    position: relative;
    height: 44px!important;
    // border-bottom: 1px solid;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    border-radius: 2px 2px 0 0;
    white-space: normal;
    padding-right: 26px;
    font-weight: 400;
    .flex_space{display: flex;align-items: center;justify-content:space-between ;}
    .coinone {
      align-items:center ;
      .symbol-name {
        height: 44px;
        line-height: 44px;
        vertical-align: unset;
        white-space: nowrap;
        margin-right: 4px;
        font-size: 16px;
        font-weight: 400;
        position: relative;
        cursor: pointer;
        display: inline-block;
        margin-left: 8px;
        padding-left: 8px;
      }
      .us_price{font-size: 16px;line-height: 20px;}
      .cny_price{font-size: 12px;font-weight: 400;color: #61688a;}
      .tl_p{color: #61688a;}
      .bt_p{color: #b0b8db;}
      .top_mag{
        margin-left: 15px;font-size: 12px;
        p{line-height: 18px;}
      }
      
    }
    .set_cor{
      position: absolute;right: 15px;bottom: 10px;cursor: pointer;
      i{font-size: 20px;}
      &:hover{color: #357ce1;font-size: 18px;}
    }
    .symbol-type {
        margin-right: 16px;
        height: 18px;
        line-height: 14px;
        font-size: 12px;
        border-radius: 3px;
        padding: 0 2px;
        color: #357ce1;
        border: 1px solid rgba(53,124,225,.4);
        vertical-align: middle;
        position: relative;
        cursor: pointer;
        display: inline-block;
    }
  }
  .chart-actions {
    height: 24px;
    border-bottom: 1px solid;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  // 图表
  .container-k {
    display: flex;
    width: 100%;
    height: 455px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-direction: column;
    flex-direction: column;
    img{width: 100%;height: 455px;}
  }
}
@media screen and (min-width: 1720px){
  .trading-chart{
    .top_kline {
        // width: calc(100% - 678px);
        // img{width: calc(100% - 678px);}
        // .container-k{width: calc(100% - 678px);}
    }
  }
}
@media screen and (min-width: 1400px){
  .trading-chart{
    .top_kline {
        // width: calc(100% - 678px);
        // img{width: calc(100% - 678px);}
    }  
    // .container-k{width: calc(100% - 678px);}
  }
  
}
</style>

